<template>
	<view class="wanl-page wanlshop-container padding-top-sm">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333',
				backgroundColor: '#fff',
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					入驻人员
				</view>
				<!-- <view class="action add">
					<text @tap="submit" class="text-lg bg-green">完成</text>
				</view> -->
			</view>
		</view>

		<wanl-image-cutter @ok="getCropperImage($event,'image')" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500" />
		<view class="lists margin-bottom-sm bg-white padding-lr">
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>入住人员近照</text>
					<view class="text-center" :style="{backgroundImage: `url(${$wanlshop.maks()})`}">
						<view @tap="chooseImage" class="cu-avatar avatar" v-if="path"
							:style="{ backgroundImage: 'url(' + path + ')' }"></view>
						<view @tap="chooseImage" class="cu-avatar avatar" v-else
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(formData.avatar, 100, 100, 2, 'upload') + ')' }">
						</view>
					</view>
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>姓名</text>
					<input v-model="formData.name" class="flex-sub" type="text" placeholder="请输入姓名">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>性别</text>
					<u-radio-group v-model="formData.sex" @change="radioGroupChange($event,'sex')">
						<u-radio label-size="28" active-color="#4CBD66" v-for="(item, index) in list" :key="index"
							:name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>身份证号码</text>
					<input v-model="formData.id_no" maxlength="18" class="flex-sub" type="id_no"
						placeholder="请输入老人的身份证号码">
				</view>
			</view>

			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>年龄</text>
					<input v-model="formData.age" maxlength="3" class="flex-sub" type="number" placeholder="请输入年龄">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>入住人员所在民族</text>
					<input v-model="formData.nation" maxlength="3" class="flex-sub" type="text" placeholder="请输入所在民族">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>与入住人员关系</text>
					<u-radio-group v-model="formData.relation" @change="radioGroupChange($event,'relation')">
						<u-radio label-size="28" active-color="#4CBD66" v-for="(item, index) in relationship"
							:key="index" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>



			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>联系人姓名</text>
					<input v-model="formData.contact_name" class="flex-sub" type="text" placeholder="请输入联系人姓名">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>联系手机号码</text>
					<input v-model="formData.mobile" maxlength="11" class="flex-sub" type="number"
						placeholder="请输入手机号码">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>联系人详细地址</text>
					<input v-model="formData.contact_address" class="flex-sub" type="text"
						placeholder="请输入联系人详细地址">
				</view>
			</view>
			<view class="item flex flex-direction justify-center">
				<view class="text flex justify-between align-center">
					<text>入住人员详细状况</text>
					<input v-model="formData.introduce" class="flex-sub" type="text" placeholder="请输入">
				</view>
			</view>
		</view>
		<view class="add">
			<text @tap="submit" class="text-lg bg-green">完成</text>
		</view>

		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		data() {
			return {
				relationship: [],
				list: [{
					name: '男',
					id: 1
				}, {
					name: '女',
					id: 2
				}],
				abilityList: [],
				ability: '',
				value: 'orange',
				formData: {
					avatar: '',
					name: '',
					id_no: '',
					mobile: '',
					sex: '',
					age: '',
					relation: '',
					nation: '',
					contact_name: '',
					contact_address: '',
					introduce: ''
				},
				path: '',
				url: '',
			};
		},
		async onLoad(option) {
			if (option.id) {
				uni.setNavigationBarTitle({
					title: '编辑'
				})
				this.loadData(option.id)
			}
			await uni.request({
				url: `/publics/commons/datadictArrays`,
				method: 'POST',
				data: {
					datadict_id: '13'
				},
				success: res => {
					this.relationship = res.data[0].item;
				}
			});
		},
		methods: {
			async loadData(id) {
				await uni.request({
					url: `/addons/nursing/api.document/detail`,
					method: 'POST',
					data: {
						id: id
					},
					success: res => {
						console.log(res, 12321)
						for (let i in res.data) {
							for (let j in this.formData) {
								if (i === j) {
									this.formData[j] = res.data[i];
								}
							}
						}
						this.ability = res.data.ability
						this.formData.id = res.data.id
					}
				});
			},
			async submit() {
				var rule = [{
						name: 'avatar',
						checkType: 'notnull',
						errorMsg: '请上传入住人员近照'
					},
					{
						name: 'name',
						checkType: 'string',
						checkRule: '2,32',
						errorMsg: '姓名至少2位'
					},
					{
						name: 'sex',
						checkType: 'notnull',
						errorMsg: '请选择性别'
					},
					{
						name: 'id_no',
						checkType: 'string',
						checkRule: '18,18',
						errorMsg: '请输入18位身份证号码'
					},

					{
						name: 'age',
						checkType: 'notnull',
						errorMsg: '请输入年龄'
					},
					{
						name: 'relation',
						checkType: 'notnull',
						errorMsg: '请选择与入住人员关系'
					},
					
					{
						name: 'contact_name',
						checkType: 'string',
						checkRule: '2,32',
						errorMsg: '联系人姓名至少2位'
					},
					{
						name: 'mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确手机号码'
					},
					{
						name: 'contact_address',
						checkType: 'notnull',
						errorMsg: '请输入联系人详细地址'
					},
					{
						name: 'introduce',
						checkType: 'notnull',
						errorMsg: '请输入入住人员详细状况'
					}
					
				];
				//进行表单检查
				var formData = this.formData;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let url = `/addons/nursing/api.document/post`
					await uni.request({
						url: url,
						method: 'POST',
						data: formData,
						success: res => {
							this.$wanlshop.msg(`${formData.id? '编辑' :'添加'}成功`);
							setTimeout(() => {
								this.$wanlshop.prePage().loadData(false);
								this.$wanlshop.back(1)
							}, 1500);
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			radioGroupChange(e, t) {
				this.formData[t] = e;
			},
			chooseAddress() {
				let location = uni.getStorageSync('location')
				uni.chooseLocation({
					latitude: location.latitude,
					longitude: location.longitude,
					success: (e) => {
						console.log(e)
						this.formData.address = e.address;
					}
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];
					}
				});
			},
			getCropperImage(e, name) {
				console.log(e,name)
				this.path = e.path;
				this.url = '';
				this.uploadData(e, name)
			},
			oncancle() {
				this.url = '';
			},
			uploadData(e, name) {
				// 上传图片
				uni.request({
					url: '/wanlshop/common/uploadData',
					success: updata => {
						uni.uploadFile({
							url: updata.data.uploadurl,
							filePath: e.path,
							name: 'file',
							formData: updata.data.storage == 'local' ? null : updata.data.multipart,
							success: res => {
									this.formData.avatar = JSON.parse(res.data).data.fullurl
							},
							fail: error => {
								this.$wanlshop.msg(JSON.parse(error.data).msg);
							}
						});
					}
				});
			},
		}
	};
</script>


<style lang="less">
	page {
		background-color: #F4F4F4;
	}

	.add {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			display: inline-block;
			width: 500rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}

	.lists {
		.item {
			height: 92rpx;
			border-bottom: 1px solid rgba(182, 182, 182, 0.2);

			&:last-child {
				border: none;
			}

			text {
				font-size: 30rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #333333;

				&:nth-child(1) {
					font-family: PingFang SC-Medium, PingFang SC;
					// margin-right: 40rpx;
				}
			}

			input {
				font-size: 28rpx;
				text-align: right;
			}
		}
	}

	/deep/.u-radio__icon-wrap {
		width: 26rpx !important;
		height: 26rpx !important;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		background-color: #e5e5e5;
		border-radius: 50%;
	}
</style>